/* 自定义工具类 */

/* 隐藏滚动条但保持功能 */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
  -webkit-overflow-scrolling: touch; /* 增强iOS触摸滚动体验 */
  overflow-x: auto; /* 确保水平滚动可用 */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* 防止容器溢出问题 */
.overflow-x-safe {
  overflow-x: auto;
  max-width: 100vw;
  -webkit-overflow-scrolling: touch;
}

/* 自定义滚动条 */
.custom-scrollbar {
  scrollbar-width: thin;  /* Firefox */
  scrollbar-color: rgba(229, 62, 62, 0.5) rgba(31, 41, 55, 0.5);  /* Firefox */
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;  /* 滚动条宽度 */
  height: 6px;  /* 水平滚动条高度 */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.5);  /* 滚动条轨道背景色 */
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(229, 62, 62, 0.5);  /* 滚动条滑块颜色 - 红色半透明 */
  border-radius: 10px;
  transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(229, 62, 62, 0.8);  /* 悬停时颜色更深 */
}

/* 触摸反馈效果 */
.touch-feedback {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.touch-feedback:active {
  transform: scale(0.95);
}

/* 淡入动画 */
.fade-in {
  @apply animate-fade-in;
}

/* 向上淡入动画 */
.fade-in-up {
  @apply animate-fade-in-up;
}

/* 页面过渡动画 */
.page-transition {
  @apply animate-fade-in;
}

/* 文本渐变 */
.text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-red to-accent-secondary;
}

/* 截断文本 - 1行 */
.truncate-1 {
  @apply overflow-hidden text-ellipsis whitespace-nowrap;
}

/* 多行截断 */
.truncate-2 {
  @apply overflow-hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.truncate-3 {
  @apply overflow-hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 自适应容器 */
.container-fluid {
  @apply w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-24 mx-auto;
}

/* 内容容器最大宽度 */
.container-content {
  @apply w-full max-w-screen-xl mx-auto;
}

/* 覆盖层 */
.overlay-dark {
  @apply absolute inset-0 bg-black bg-opacity-50;
}

.overlay-gradient-bottom {
  @apply absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent;
}

.overlay-gradient-top {
  @apply absolute inset-0 bg-gradient-to-b from-black via-black/50 to-transparent;
}

/* 响应式隐藏/显示 */
.hide-on-mobile {
  @apply hidden sm:block;
}

.show-on-mobile {
  @apply sm:hidden;
}

/* 聚焦和激活状态 */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-1 focus:ring-offset-background-card;
}

/* 视觉无障碍 - 仅限屏幕阅读器 */
.sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

/* 全局工具类 */

/* 字体尺寸工具类 */
.text-app-base {
  @apply text-sm md:text-base;
}

.text-app-sm {
  @apply text-xs md:text-sm;
}

.text-app-lg {
  @apply text-base md:text-lg;
}

.text-app-xl {
  @apply text-lg md:text-xl lg:text-2xl;
}

.text-app-2xl {
  @apply text-xl md:text-2xl lg:text-3xl;
} 